<template>
    <div style="margin: 0 20px;">
        <h2>Vue2区别于Vue3的事件绑定方法</h2>
        <p>@after-init.native="onAfterInit" &nbsp;&nbsp; @doc-loaded.native="onDocLoaded"</p>
        <p>
            <button @click="execCommand('preview')">预览</button>
            <button @click="execCommand('print')">打印</button>
            <button @click="execCommand('exportHtml')">导出html</button>
            <button @click="execCommand('exportPdf')">导出pdf</button>
        </p>
        <Editor mode="design"  @after-init.native="onAfterInit1" @doc-loaded.native="onDocLoaded" doc="/mock/bind_data.html"  width="100%"></Editor>
        <P>表单模式&只读模式</P>
        <Editor mode="form" doc="/mock/bind_data.html"  width="45%" @after-init.native="onAfterInit2"></Editor>
        <Editor mode="readonly" doc="/mock/bind_data.html"  width="45%" style="margin-left: 20px;"></Editor>
    </div>
</template>

<script>
import Editor from '@/components/Editor.vue'

export default{
    components: {'Editor' : Editor},
    data(){
        return{
            editor1:null, //第1个文档实例
            editor2: null,//第2个文档实例
        }
    },
    methods:{
        //初始化第1个文档
        onAfterInit1: function(e) {
            this.editor1 = e.editor
        },

        //文档加载后
        onDocLoaded: function(e) {
            this.editor1.setBindObject('令狐冲','name')
        },

        //执行文档命令
        execCommand: function(cmd) {
            this.editor1.execCommand(cmd)
        },

        //初始化第2个文档
        onAfterInit2: function(e) {
            this.editor2 = e.editor
        },

    }
}
</script>